<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <%- include common %>

        <style>
            #chatroom {
                width: 300px;
                height: 520px;
                border: 1px solid darkgoldenrod;
                border-radius: 5px;
                overflow-y: auto;
            }
            
            * {
                padding: 0;
                margin: 0;
            }
            
            html,
            body {
                position: relative;
                width: 100vw;
                height: 100vh;
            }
            
            #mask {
                width: 100vw;
                height: 100vh;
                position: absolute;
                top: 0;
                left: 0;
                background: rgba(0, 0, 0, 0.3);
                display: flex;
                justify-content: center;
                align-items: center;
                /* display: none; */
            }
            
            #box {
                width: 200px;
                height: 130px;
                background: #fff;
                border: 1px solid #fff;
                border-radius: 6px;
                display: none;
            }
            
            #chatroom {
                margin: auto;
                width: 400px;
            }
        </style>
</head>

<%- include('head',{title:'chatroom',username:username})%>
    <div class="container text-center text-primary">
        <h2 style="margin-top:60px; "> 在线聊天室 - <span id="user" class="text-primary"></span></h2>

        <div id="chatroom" style="position: relative;">

            <input class="form-control" id="word" type="text" placeholder="请回复" style="position: absolute;left: 0;bottom: 0;">
            <input class="btn btn-default" type="submit" value="回复" style="position: absolute;right: 0;bottom: 0;" id="sendbtn">
        </div>

        <!-- <input type="text" id="word"> -->

        <div id="mask">
            <div class="tips">
                链接聊天室服务器中...
            </div>
            <div id="box">
                <input type="text" style="    margin-top: 30px;" class="form-control" id="nickname" placeholder="输入昵称" required>
                <!-- <input type="text" id="nickname" placeholder="请输入昵称" required> -->
                <button id="btn" class="btn btn-default" style="margin-top: 30px;">确定链接</button>
            </div>
        </div>

    </div>

    <%- include foot%>

        <script>
            // # 创建 socket 对象
            // # 链接服务器端指定的端口
            // # 发送消息给服务器端
            // # 接收来自服务器的消息
            // # 监听服务器的 失去链接关闭
            var ws = new WebSocket("ws://192.168.137.1:3300")

            ws.onopen = function() {
                console.log("success--连接成功")
                $(".tips").hide();
                $("#box").show();

            }

            function sendWord() {
                ws.send(word.value)
                word.value = "";
            }

            sendbtn.onclick = function() {
                sendWord()
            }

            document.onkeypress = function(e) {
                if (e.keyCode == 13) {
                    sendWord()
                }
            }

            btn.onclick = function() {
                var myname = nickname.value;
                console.log(myname);
                ws.send("大家好,我是 " + myname) // 发送消息给服务器端
                $("#mask").hide();
                $("#user").text(myname)
            }

            ws.onerror = function(err) {
                    console.log("服务器停止服务了 - 服务异常 ...")
                }
                // 监听服务器端关闭
            ws.onclose = function() {
                console.log("服务器已经关闭了...")
            }

            // # 接收来自服务器的消息
            ws.onmessage = function(data) {
                console.log(data)
                $("#chatroom").append(`<p style="color:#666;font-size:14px">${data.data}</p>`);
            }
        </script>